<template>
    <div class="poa">
        <top @leftfn="back" :left="'el-icon-arrow-left'" :title="'绑定手机号'" />
        <div class="gun">
            <div class="form">
                <div class="phone">
                    <div class="six">
                        +86
                    </div>
                    <form_input :value.sync="form.phone" :text="'手机号'" />
                </div>
                <div class="phone">
                    <div class="input">
                        <form_input :value.sync="form.code" :text="'请输入验证码'" />
                    </div>
                    <button v-phone="{ form, yes }" class="last2">
                        获取验证码
                    </button>
                </div>
                <submit @yes="submit_login" :form="form" :text="'绑定'" />
            </div>
            <div class="bt"></div>
        </div>
    </div>
</template> 
<script>
import form_input from './common/form_input.vue';
import submit from './common/submit.vue';
import top from './common/top.vue'
export default ({
    components: {
        top,
        submit,
        form_input,
    },
    data() {
        return {
            form: {
                phone: '',
                code: '',
            },
        }
    },
    methods: {
        back() {
            this.$router.go(-1)
        },
        yes() {
            this.$http({
                url: 'http://43.138.15.137:8085/api/user/sendcode',
                method: 'post',
                data: {
                    phone: this.form.phone
                },
            }).then(res => {
                this.$TiShi({ text: res.data.msg })
                this.right_code = res.data.msg.slice(4)
            }, (err) => {
                this.$TiShi({ text: err.response.data.msg })
            })
        },
        submit_login() {
            var zhengze = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
            if (!zhengze.test(this.form.phone)) {
                this.$TiShi({ text: '手机号格式错误' })
                return
            }
            if (this.form.code !== this.right_code) {
                this.$TiShi({ text: '验证码错误' })
                return
            }
            this.$http({
                url: 'http://43.138.15.137:8085/api/user/bindphone',
                method: 'post',
                data: this.form,
            }).then(res => {
                this.$TiShi({ text: res.data.msg })
                this.$router.go(-1)
            }, (res => {
                this.$TiShi({ text: res.data.msg })
                this.$router.go(-1)
            }))
        },
    },
    created() {

    }
})
</script>
<style scoped lang="scss">
@function r($v) {
    @return $v / (390 /10rem)
}

.form {
    padding: 0 r(10);

    .phone {
        display: flex;
        position: relative;
        margin-bottom: r(6);

        .six {
            border-bottom: 1px solid #eee;
            padding: 0 r(12);
            font-size: r(14);
            color: #000;
            display: flex;
            align-items: center;
        }
    }

    .input {
        flex: 1;
    }

    .last {
        font-size: r(14);
        color: #666;
        display: flex;
        justify-content: center;
        align-items: center;
        border-bottom: 1px solid #eee;
        padding-right: r(10);
    }

    .last2 {
        width: r(72);
        background-color: #FF4A6A;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: r(14);
        color: #fff;
        padding: 0 r(15);
        box-sizing: content-box;
    }
}
</style>